<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" @loadData="loadData">
      <template #membermsg="{ record }">
        <div
          >{{ record.memberName }}
          <span class="member-label" v-if="record.memberLabel == 1"></span>
          <span class="member-label member-fx" v-if="record.memberLabel == 3">{{ record.memberLabelName }}</span>
          <span class="member-label member-yz" v-if="record.memberLabel == 2">{{ record.memberLabelName }}</span>
        </div>
        <div>{{ record.phone }} </div>
        <div>{{ record.clientName }} </div>
      </template>
      <template #idcard="{ record }">
        <div>证件类型：{{ record.cardTypeName }} </div>
        <div>
          证件照：<span :class="record.idCardUpload == '未上传' ? 'card-w' : ''">{{ record.idCardUpload }} </span></div
        >
        <div>证件号：{{ record.cardNumber || '-' }} </div>
        <div>证件住址：{{ record.cardAddress || '-' }} </div>
        <div>
          到期日：{{ record.identityLongName ? record.identityLongName : record.identityExpireTime }}
          <span class="dateover">{{ getDates(record.identityExpireTime) }}</span>
        </div>
      </template>
      <template #dcard="{ record }">
        <div>
          证件照：<span :class="record.driverUpload == '未上传' ? 'card-w' : ''">{{ record.driverUpload }} </span>
        </div>
        <div>驾驶证号：{{ record.driverNumber || '-' }} </div>
        <div>
          到期日：{{ record.driverLongName ? record.driverLongName : record.driverExpireTime }}
          <span class="dateover">{{ getDates(record.driverExpireTime) }}</span>
        </div>
      </template>
      <template #status="{ record }">
        <status-tag :value="record.memberStatus" :label="record.memberStatusName" type="memberStatus" />
        <div @click="records(record.id)" v-if="record.isRecord == 1" class="button-border">状态变更记录</div>
      </template>
      <template #placeorder="{ record }">
        <div>自驾短租：{{ record.shortOrderNum }}</div>
        <div>自驾长租：{{ record.longOrderNum }}</div>
      </template>
      <template #consumption="{ record }">
        <div>自驾短租：{{ record.shortOrderAmount }}</div>
        <div>自驾长租：{{ record.longOrderAmount }}</div>
      </template>
      <template #ecAuthenticationStatusName="{ record }">
        <div>{{ record.ecAuthenticationStatusName }}</div>
        <div v-if="record.ecAuthenticationStatus === 0"> 原因: {{ record.authenticationFailedReason }} </div>
      </template>
    </table-index>
  </div>
  <memberlabelModal ref="memberlabel" @save="loadData" />
  <memberstatuslist ref="statuslist" />
  <memberorder ref="orderlist" />
  <memberblock ref="membertoblock" @save="loadData" />
  <memberrestore ref="membertorestore" @save="loadData" />
  <!-- 导入 -->
  <import-modal ref="imoportRef" action="/czcCustMember/importExcel" download-import="/个人会员导入模板.xlsx" @ok="loadData" />
</template>

<script setup name="MemberList">
  import memberrestore from './components/member-restore.vue'
  import memberlabelModal from './components/member-memberlabel.vue'
  import memberstatuslist from './components/member-status-record.vue'
  import memberorder from './components/member-order.vue'
  import memberblock from './components/member-block.vue'
  import { useExport } from '@/hooks/list'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { getMemberList, memberExportExcel } from '@/api/market/member'
  import { onMounted, reactive, computed, ref } from 'vue'
  import dayjs from 'dayjs'
  import { usePageDict } from '@/hooks/useDict'
  import useNavigate from '@/hooks/useNavigate'

  const { navigateTo } = useNavigate()

  const memberlabel = ref(null)
  const statuslist = ref(null)
  const orderlist = ref(null)
  const membertoblock = ref(null)
  const membertorestore = ref(null)

  const memberPageData = usePageDict('memberPageData')
  console.log(memberPageData)
  // 接口参数（不包含page信息）
  const queryParam = reactive({})
  const imoportRef = ref(null) // 导入组件

  // 导出事件
  const handleExport = () => {
    useExport(memberExportExcel, queryParam)
  }
  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '姓名', prop: 'memberNameLike', type: 'a-input' },
      { label: '手机号', prop: 'phoneLike', type: 'a-input' },
      {
        label: '所属企业',
        prop: 'clientId',
        type: 'remote-select',
        attrs: {
          type: 'member_clientInfo',
        },
      },
      {
        label: '证件类型',
        prop: 'cardType',
        type: 'a-select',
        options: memberPageData.cardTypeMap,
      },
      { label: '证件号', prop: 'cardNumberLike', type: 'a-input' },
      {
        label: '证件是否到期',
        prop: 'identityExpireTime',
        type: 'a-select',
        options: [
          {
            label: '未到期',
            value: 0,
          },
          {
            label: '已到期',
            value: 1,
          },
        ],
        change: (value = '') => {
          if (value == 0) {
            queryParam.identityExpireTimeS = dayjs(getNowDate(0)).format('YYYY-MM-DD')
            queryParam.identityExpireTimeE = ''
          }
          if (value == 1) {
            queryParam.identityExpireTimeS = ''
            queryParam.identityExpireTimeE = dayjs(getNowDate(0)).format('YYYY-MM-DD')
          }
          if (!queryParam.identityExpireTime) {
            queryParam.identityExpireTimeS = ''
            queryParam.identityExpireTimeE = ''
          }
        },
      },
      { label: '驾驶证号', prop: 'driverNumberLike', type: 'a-input' },
      {
        label: '驾驶证是否到期',
        prop: 'driverExpireTime',
        type: 'a-select',
        options: [
          {
            label: '未到期',
            value: 0,
          },
          {
            label: '已到期',
            value: 1,
          },
        ],
        change: (value = '') => {
          if (value == 0) {
            queryParam.driverExpireTimeS = dayjs(getNowDate(0)).format('YYYY-MM-DD')
            queryParam.driverExpireTimeE = ''
          }
          if (value == 1) {
            queryParam.driverExpireTimeS = ''
            queryParam.driverExpireTimeE = dayjs(getNowDate(0)).format('YYYY-MM-DD')
          }
          if (!queryParam.driverExpireTime) {
            queryParam.driverExpireTimeS = ''
            queryParam.driverExpireTimeE = ''
          }
        },
      },
      {
        label: '会员标签',
        prop: 'memberLabel',
        type: 'a-select',
        options: memberPageData.MemberLabelInfoEnum,
      },
      {
        label: '来源',
        prop: 'source',
        type: 'a-select',
        options: memberPageData.sourceMap,
      },
      {
        label: '身份认证',
        prop: 'identityAuthStatus',
        type: 'a-select',
        options: memberPageData.identityAuthMap,
      },
      {
        label: '状态',
        prop: 'memberStatus',
        type: 'a-select',
        options: memberPageData.statusMap,
      },
      {
        label: '电子合同认证状态',
        prop: 'ecAuthenticationStatus',
        type: 'a-select',
        options: memberPageData.IdentStatusEnum,
      },
    ]
  })

  // 初始化
  const init = () => {
    loadData()
  }
  // table 配置
  const table = useTable({
    columns: [
      { title: '会员信息', dataIndex: 'carMsg', width: 120, fixed: 'left', slotName: 'membermsg' },
      { title: '证件信息', dataIndex: 'siteName', width: 250, slotName: 'idcard' },
      { title: '驾驶证信息', dataIndex: 'libraryName', width: 250, slotName: 'dcard' },
      { title: '来源', dataIndex: 'sourceName' },
      { title: '身份认证', dataIndex: 'identityAuthStatusName', width: 100 },
      { title: '电子合同认证状态', dataIndex: 'ecAuthenticationStatusName', width: 150, slotName: 'ecAuthenticationStatusName' },
      { title: '状态', dataIndex: 'memberStatusName', width: 130, slotName: 'status' },
      { title: '累计下单', dataIndex: 'shortOrderNum', unit: '单', width: 150, slotName: 'placeorder' },
      { title: '累计消费', dataIndex: 'shortOrderAmount', unit: '元', width: 150, slotName: 'consumption' },
      { title: '创建时间', dataIndex: 'createTime', width: 170 },
      { title: '创建人', dataIndex: 'createUserName', width: 100 },
    ],
    operates: [
      {
        label: '详情',
        permission: 'svms:market:bazaar:member.detail',
        method: (record) => {
          navigateTo('/member-person/detail/' + record.id, record.memberName + '-个人会员详情')
        },
      },
      {
        label: '编辑',
        permission: 'svms:market:bazaar:member.edit',
        method: (record) => {
          navigateTo('/member-person/edit/' + record.id, record.memberName + '-个人会员编辑')
        },
      },
      {
        label: '拉黑',
        permission: 'svms:market:bazaar:member.black',
        show: (record) => record.memberStatus == 0,
        method: (record) => {
          membertoblock.value.openModal(record.id)
        },
      },
      {
        label: '恢复',
        permission: 'svms:market:bazaar:member.restore',
        show: (record) => record.memberStatus == 1,
        method: (record) => {
          membertorestore.value.openModal(record.id)
        },
      },
      {
        label: '会员标签',
        permission: 'svms:market:bazaar:member.label',
        // show: (record) => record.status == 1,
        method: (record) => {
          memberlabel.value.openModal(record.id)
        },
      },
    ],
    buttons: [
      {
        mode: 'import',
        label: '导入',
        permission: 'svms:market:bazaar:member.import',
        method: () => {
          imoportRef.value.show()
        },
      },
      {
        mode: 'import',
        label: '导出',
        permission: 'svms:market:bazaar:member.export',
        method: () => handleExport(),
      },
      {
        type: 'primary',
        icon: 'plus',
        permission: 'svms:market:bazaar:member.add',
        label: '新增',
        method: () => handleAdd(),
      },
    ],
  })

  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getMemberList)
  // 添加事件
  const handleAdd = () => {
    navigateTo('/member-person/create')
  }
  // 获取今日,日期对比
  const getDates = (day) => {
    if (!day) {
      return ''
    }
    var a = new Date(dayjs(getNowDate(0)).format('YYYY-MM-DD'))
    var b = new Date(day)
    if (b.getTime() <= a.getTime()) {
      return '(已到期)'
    }
  }
  // 记录
  const records = (id) => {
    statuslist.value.openModal(id)
  }
  // 短长租数量
  const shortRecords = (id, orderType) => {
    orderlist.value.openModal(id, 'member', orderType)
  }

  // 默认日期时间
  const getNowDate = (n) => {
    var timestamp = Date.parse(new Date())
    timestamp = timestamp / 1000
    timestamp += Number(n) * 86400
    var newTime = new Date(timestamp * 1000)
    return newTime
  }

  defineExpose({
    loadData,
  })

  onMounted(() => {
    init()
    getDates()
  })
</script>

<style lang="less" scoped>
  .member-label {
    padding: 0 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 8px;
  }
  .member-fx {
    background: #ffece8;
    color: #f53f3f;
  }
  .member-yz {
    background: #e8ffea;
    color: #00b42a;
  }
  .card-w {
    color: #f53f3f;
  }
  .dateover {
    color: #86909c;
  }
  .status-z {
    color: #00b42a;
  }
  .status-h {
    color: #f53f3f;
  }
  .button-border {
    cursor: pointer;
    text-align: center;
    border-radius: 2px;
    padding: 0 7px;
    border: 1px solid #1890ff;
    color: #1890ff;
    font-size: 12px;
  }
  .margin-l-8 {
    margin-left: 8px;
  }
</style>
